<template>
    <div id="v_localUser_right">
        <n-data-table
            striped
            :columns="tableControl.columns"
            :data="tableControl.data"
            :pagination="false"
            :bordered="false" />
    </div>
    <com_modal_valueEditor ref="REF_com_modal_valueEditor" />
</template>

<script setup lang="ts">
import {
    apx_editOptionValue,
    axg_getOptions,
    axp_switchOption,
    type ConfigurationItem
} from '@/utils/interface/ConfigurationItem'
import { NButton, NSpace, useMessage } from 'naive-ui'
import { h, onMounted, reactive, ref } from 'vue'
import com_modal_valueEditor from './com_modal_valueEditor.vue'
const message = useMessage()
const REF_com_modal_valueEditor = ref<InstanceType<typeof com_modal_valueEditor>>()
const tableControl = reactive({
    columns: [
        {
            title: ' ',
            render: (row: ConfigurationItem, index: number) => {
                return row.active ? index + 1 : ''
            }
        },
        {
            title: '键名',
            key: 'key',
            sorter: 'default'
        },
        {
            title: '说明',
            key: 'description'
        },
        {
            title: '默认值',
            key: 'default',
            className: 'col-default'
        },
        {
            title: '当前值',
            key: 'value',
            render: (row: ConfigurationItem) => {
                if (row.value == 'YES') {
                    return h('span', { style: 'color:green' }, row.value.toString())
                } else if (row.value == 'NO') {
                    return h('span', { style: 'color:orange' }, row.value.toString())
                } else if (row.value == '' || row.value == null || row.value == undefined) {
                    return h('span', { style: 'color:red' }, '%空值%')
                } else if (row.value == '%空值%') {
                    return h('span', { style: 'color:red' }, '%空值%')
                } else {
                    return h('span', {}, row.value)
                }
            }
        },
        {
            title: '操作',
            render: (row: ConfigurationItem) => {
                let btn_group
                if (row.active) {
                    btn_group = [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                type: 'warning',
                                secondary: true,
                                onClick: () => tableControl.operations.handleSwitchFunction(row.key)
                            },
                            () => '禁用该项'
                        ),
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                type: 'info',
                                secondary: true,
                                onClick: () => {
                                    tableControl.operations.handleEditValue(row)
                                }
                            },
                            () => '修改值'
                        )
                    ]
                } else {
                    btn_group = [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                type: 'primary',
                                secondary: true,
                                onClick: () => tableControl.operations.handleSwitchFunction(row.key)
                            },
                            () => '启用该项'
                        )
                    ]
                }
                return h(NSpace, {}, () => btn_group)
            }
        }
    ],
    data: [] as ConfigurationItem[] | any[],
    pagination: {
        page: 2,
        pageSize: 30,
        showSizePicker: true,
        pageSizes: [30, 50, 100],
        onChange: (page: number) => {
            tableControl.pagination.page = page
        },
        onUpdatePageSize: (pageSize: number) => {
            tableControl.pagination.pageSize = pageSize
            tableControl.pagination.page = 1
        }
    },
    operations: {
        handleSwitchFunction(key: string, current_value: string = '') {
            let new_value = current_value == 'YES' ? 'NO' : 'YES'
            axp_switchOption(key).then((response_data) => {
                if (response_data) {
                    const i = tableControl.data.findIndex((item) => item.key === key)
                    tableControl.data[i].active = !tableControl.data[i].active
                    tableControl.data[i].value = response_data['default']

                    message.success('操作成功')
                } else {
                    message.error('操作失败')
                }
            })
        },
        handleEditValue(row: ConfigurationItem) {
            REF_com_modal_valueEditor.value?.handleShow(row)
        }
    }
})
async function handleFetchData() {
    await axg_getOptions('anonymous_user').then((response_data) => {
        tableControl.data = response_data
    })
}

onMounted(() => {
    handleFetchData()
})
</script>

<style lang="scss" scoped>
#v_localUser_right {
    .right-item {
        display: flex;
        align-items: center;
        padding: 0 1rem;
        height: 1.5rem;
        //border-bottom: 1px solid #ccc;
        &:nth-child(2n + 1) {
            background-color: #00000008;
        }
        .title {
            flex: 1;
            max-width: 30rem;
        }
    }
}
</style>
